今日，筆者將會為Todo頁面的「新增」按鈕增加功能：開啟新頁面並在該頁面中輸入並新增Todo物件。此篇中會介紹以下兩個新內容：

1. Navigator.push()
2. FormField類別

那麼就直接開始本篇的內容吧！

利用Navigator在新舊頁面之間移動

官方教學連結：Navigate to a new screen and back

筆者希望能夠在按下Todo頁面的「新增」按鈕時能夠開啟一個暫時性的頁面以新增並輸入新的block，在做了一點搜尋後，找到了這個範例：Interactive Example。
這其實非常的基礎，基本上就是將我們所在與新開啟的頁面加入一個堆疊stack，關閉頁面時將頁面從stack中pop出來。

實作的方式也非常容易，只需要在想開啟新頁面的按鈕增加push功能，以及關閉頁面的按鈕有pop功能，便能夠完成啦！現在直接來看看程式碼吧！

開啟新頁面：Navigator.push()

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const AddDataPage()),
  );
},

關閉新開啟的頁面：Navigator.pop()

onPressed: () {
    Navigator.pop(context);
}

FormField：讓使用者輸入資料

此段將會以官方的Cookbook - Build a form with validation, API Docs - TextFormField為範本完成程式。

FormField會在的頁面的基礎程式碼如下：

import 'package:flutter/material.dart';

class AddDataPage extends StatelessWidget {
  const AddDataPage({super.key});

  @override
  Widget build(context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Add New Entry"),
      ),
      body: const EntryForm(),
    );
  }
}

class EntryForm extends StatefulWidget {
  const EntryForm({super.key});

  @override
  State<EntryForm> createState() => _EntryFormState();
}

class _EntryFormState extends State<EntryForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(context) {
    return Form(
        key: _formKey,
        child: const Column(
          children: [],
        ));
  }
}

現在，我們所需要做的僅僅是在EntryForm的Form.child.children新增FormField便能完成本次的目標。

等到明天這部份的程式碼完成後會再來補上。
謝謝願意閱讀到這裡的讀者，有任何問題或想法都歡迎留言及email，明天會繼續努力更新的！